<template>
  <Layout :isShowBorderBottom="false" :isShowMore="false">
    <template #left-content>
      <div class="search drag">
        <div
          v-if="leftInfoType === 0"
          class="search-icon no-drag"
          @click.stop="switchLeftInfoType(1)"
        >
          <span class="iconfont icon-search"></span>
          <span style="font-size: 13px">搜索</span>
        </div>
        <div v-if="leftInfoType === 1" class="search-input no-drag">
          <el-input
            ref="inputRef"
            v-model="searchValue"
            clearable
            placeholder=""
            @input="executeSearch"
          >
            <template #prefix>
              <span class="iconfont icon-search"></span>
            </template>
          </el-input>
        </div>

        <div
          v-if="leftInfoType === 2"
          class="search-icon no-drag"
          @click.stop="switchLeftInfoType(3)"
        >
          <span class="iconfont icon-add-user"></span>
          <span style="font-size: 13px">&nbsp;邮箱/甜蜜账号</span>
        </div>
        <div v-if="leftInfoType === 3" class="search-input no-drag">
          <el-input ref="inputRef" v-model="searchValue" clearable placeholder="">
            <template #prefix>
              <span class="iconfont icon-24px"></span>
            </template>
          </el-input>
        </div>

        <div
          v-if="leftInfoType === 0 || leftInfoType === 1"
          class="add no-drag "
          title="添加朋友"
          @click="switchLeftInfoType(2)"
        >
          <span class="iconfont icon-add-user"></span>
        </div>
        <div
          v-if="leftInfoType === 2 || leftInfoType === 3"
          class="cancel no-drag"
          style="font-size: 13px"
          @click="switchLeftInfoType(0)"
        >
          &nbsp;取消
        </div>
      </div>
      <!--      搜索之前显示 -->
      <el-scrollbar v-if="leftInfoType === 0" ref="scrollbarRef" class="contact-info" @scroll="scroll">
        <!--      新的朋友-->
        <div class="block">
          <div class="book-management">
            <div class="info">
              <span class="iconfont icon-users-alt"> &nbsp;通讯录管理</span>
            </div>
          </div>
          <div class="part-title">{{ newFriends.title }}</div>
          <div
            :class="['content', currentSelection === newFriends.name ? 'active' : '']"
            @click="switchRightInfoType(1, newFriends)"
          >
            <div class="part-icon">
              <div :style="{ background: newFriends.blockImg }" class="part-img">
                <span :class="['iconfont', newFriends.blockIcon]"></span>
              </div>
              <div class="part-name">{{ newFriends.name }}</div>
            </div>
          </div>
        </div>
        <!--      群聊-->
        <div class="block">
          <div class="part-title">{{ groupChat.title }}</div>
          <div class="content">
            <div class="part-icon">
              <div :style="{ background: groupChat.blockImg }" class="part-img">
                <span :class="['iconfont', groupChat.blockIcon]"></span>
              </div>
              <div class="part-name">{{ groupChat.name }}</div>
            </div>
          </div>
          <div
            v-for="groupChat in groupChatList"
            :class="[
              'content',
              'contact-list',
              currentSelection === groupChat.groupId ? 'active' : ''
            ]"
            @click="switchRightInfoType(2, groupChat)"
          >
            <div class="part-icon">
              <!--              todo  修改群聊头像-->
              <el-avatar :size="40" :src="groupChat.avatar" shape="" />
              <div class="part-name">{{ groupChat.name }}</div>
            </div>
          </div>
        </div>

        <!--        联系人-->
        <div v-for="item in contactPersonList" class="block">
          <div class="part-title">{{ item.title }}</div>
          <div
            v-for="userInfo in item.value"
            :class="[
              'content',
              'contact-list',
              currentSelection === userInfo.userId ? 'active' : ''
            ]"
            @click="switchRightInfoType(3, userInfo)"
          >
            <div class="part-icon">
              <!--               todo 需要修改 群聊头像-->
              <el-avatar
                :size="40"
                :src="Tool.getAvatar(userInfo.userId, userInfo.avatar)"
                shape=""
              />
              <div class="part-name">{{ userInfo.nickName }}</div>
            </div>
          </div>
        </div>
      </el-scrollbar>

      <!--   搜索结果-->
      <el-scrollbar v-if="leftInfoType === 1" class="search-result">
        <!--        联系人-->
        <div
          v-if="
            searchResultContactPersonNickNameList.length > 0 ||
            searchResultContactPersonUserSweetCircleIdList.length > 0
          "
          class="contact-person-info"
        >
          <div style="padding-left: 10px; font-size: 15px; color: #7a7a7a">联系人</div>
          <div
            v-for="user in searchResultContactPersonNickNameList"
            class="user-info"
            @click="sendMessage(user)"
          >
            <div class="avatar">
              <el-avatar :size="40" :src="user.avatar" shape="" />
            </div>
            <div>
              <div class="nick-name"><span v-html="getValue(user.nickName)"></span></div>
              <div class="userSweetCircleId">
                甜蜜账号:&nbsp;<span v-html="getValue(user.userSweetCircleId)"></span>
              </div>
            </div>
          </div>
        </div>
        <!--        群聊-->
        <div v-if="searchResultGroupChatList.length > 0" class="contact-person-info">
          <div style="padding-left: 10px; font-size: 15px; color: #7a7a7a">群聊</div>
          <div
            v-for="groupChat in searchResultGroupChatList"
            class="user-info"
            @click="sendMessage(groupChat)"
          >
            <div class="avatar">
              <el-avatar :size="40" :src="groupChat.avatar" shape="" />
            </div>
            <div>
              <div class="nick-name"><span v-html="getValue(groupChat.name)"></span></div>
              <div class="userSweetCircleId">
                包含:&nbsp;<span v-html="getValue(groupChat.name)"></span>
              </div>
            </div>
          </div>
        </div>

        <!--        聊天记录-->
        <div v-if="searchResultChatRecordList.length > 0" class="contact-person-info">
          <div style="padding-left: 10px; font-size: 15px; color: #7a7a7a">聊天记录</div>
          <div
            v-for="item in searchResultChatRecordList"
            class="user-info"
            @click="sendMessage(item)"
          >
            <div class="avatar">
              <el-avatar :size="40" :src="item.avatar" shape="" />
            </div>
            <div v-if="item.groupId">
              <div class="nick-name"><span v-html="getValue(item.name)"></span></div>
              <div class="userSweetCircleId">包含:&nbsp;<span v-html="getValue(item.name)"></span></div>
            </div>
            <div v-if="item.nickName">
              <div class="nick-name"><span v-html="getValue(item.nickName)"></span></div>
              <div class="userSweetCircleId">
                包含:&nbsp;<span v-html="getValue(item.nickName)"></span>
              </div>
            </div>
          </div>
        </div>

        <!--      网络查找联系人-->
        <div
          v-if="
            /^[a-zA-Z0-9]+$/.test(searchValue) ||
            /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.com)/.test(searchValue)
          "
          class="search-contacts-online"
          @click="searchContactPerson(false)"
        >
          <div class="icon">
            <span class="iconfont icon-add-user"></span>
          </div>
          <div style="font-size: 14px; user-select: none">
            网络查找甜蜜账号/邮箱&nbsp;&nbsp;&nbsp;<span class="iconfont icon-right"></span>
          </div>
        </div>
      </el-scrollbar>

      <el-scrollbar v-if="leftInfoType === 3" class="search-result">
        <div
          v-if="searchContactPersonMsg.length > 0"
          style="padding: 20px; color: #8c8c8c; font-size: 14px; background: white"
        >
          <span>{{ searchContactPersonMsg }}</span>
        </div>
        <div
          v-if="searchValue.length > 0"
          class="search-contacts-online"
          @click="searchContactPerson(true)"
        >
          <div class="icon">
            <span class="iconfont icon-search"></span>
          </div>
          <div style="font-size: 14px; user-select: none">
            搜索:&nbsp;<span v-html="getValue(searchValue)"></span
          ><span class="iconfont icon-right"></span>
          </div>
        </div>
      </el-scrollbar>
    </template>
    <template #right-content>
      <div @click="switchStatus">
        <BlankPage v-if="rightInfoType === 0"></BlankPage>
        <ContactInfo v-if="rightInfoType === 1"></ContactInfo>
        <GroupInfo v-if="rightInfoType === 2"></GroupInfo>
        <NewFriends v-if="rightInfoType === 3"></NewFriends>
      </div>
    </template>
  </Layout>
  <div v-if="showCardInfo && cardInfoType === 0" class="card-contact">
    <el-card class="card-contact-info">
      <div>{{ searchContactPersonMsg }}</div>
      <div class="button">
        <el-button type="primary" @click.stop="closeCard">确定</el-button>
      </div>
    </el-card>
  </div>
  <div v-if="showCardInfo && cardInfoType === 1" class="card-contact2 no-drag" @click="closeCard">
    <el-card class="card-contact-info2">
      <div class="info">
        <div class="userimg">
          <el-avatar
            :size="60"
            :src="
              Tool.getAvatar(searchContactPersonResult.userId, searchContactPersonResult.avatar)
            "
            shape="square"
          />
        </div>
        <div class="user-info">
          <div class="nick-name">
            <span>{{ searchContactPersonResult.nickName }}</span>
            <span
              :class="[
                'iconfont sex',
                searchContactPersonResult.sex === 1 ? 'icon-man' : 'icon-woman'
              ]"
            ></span>
          </div>
          <div class="area-name">地区：{{ searchContactPersonResult.areaName }}</div>
        </div>
      </div>
      <el-divider />
      <div class="button">
        <el-button
          v-if="searchContactPersonResultIsFriend"
          type="primary"
          @click.stop="sendMessage(searchContactPersonResult)"
        >发消息
        </el-button
        >
        <el-button v-else type="primary" @click.stop="showCardInfo = false;showAddContactcardInfo = true">添加到通讯录
        </el-button>
      </div>
    </el-card>
  </div>
  <div v-if="showAddContactcardInfo" class="add-contact-card no-drag">
    <el-card class="add-contact-card-info">
      <div class="title">申请添加朋友</div>
      <div class="applyMsg">
        <div class="info">
          <div class="a">发送添加朋友申请</div>
          <div>
            <el-input v-model="addFriendApplyFormData.applyMsg" />
          </div>
        </div>
        <div class="info">
          <div class="a">备注名</div>
          <div>
            <el-input v-model="addFriendApplyFormData.noteName" />
          </div>
        </div>
        <!--        <div>-->
        <!--          <div>标签</div>-->
        <!--          <div><el-input v-model="addFriendApplyFormData.applyMsg"/></div>-->
        <!--        </div>-->
      </div>
      <div class="sweet-circle-authority">
        <div class="a">设置甜甜圈权限</div>
        <div class="b">
          <div class="c" @click="addFriendApplyFormData.sweetCircleAuth = 0" style="cursor: pointer"><span
            style="color: #000000;font-size: 14px">聊天、甜甜圈</span><span class="iconfont icon-dui active"
                                                                           v-if="addFriendApplyFormData.sweetCircleAuth === 0"></span>
          </div>
          <el-divider />
          <div class="c" @click="addFriendApplyFormData.sweetCircleAuth = 1" style="cursor: pointer"><span
            style="color: #000000;font-size: 14px">仅聊天</span><span class="iconfont icon-dui active"
                                                                      v-if="addFriendApplyFormData.sweetCircleAuth === 1"></span>
          </div>
        </div>
      </div>
      <div class="sweet-circle-authority" v-if="addFriendApplyFormData.sweetCircleAuth === 0">
        <div class="a">甜甜圈和状态</div>
        <div class="b">
          <div class="c"><span style="color: #000000;font-size: 14px">不让他（她）看</span>
            <el-switch v-model="addFriendApplyFormData.sweetCircleStatusA" :active-value="1" :inactive-value="0" />
          </div>
          <el-divider />
          <div class="c"><span style="color: #000000;font-size: 14px">不看他</span>
            <el-switch v-model="addFriendApplyFormData.sweetCircleStatus" :active-value="1" :inactive-value="0" />
          </div>
        </div>
      </div>
      <div class="button">
        <el-button class="confirm" type="primary" @click="addContactPerson">确定</el-button>
        <el-button class="cancel" type="primary" @click="showAddContactcardInfo=false">取消</el-button>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import Layout from '#/components/Layout.vue'
import ContactInfo from '#/views/contact/ContactInfo.vue'
import GroupInfo from '#/views/contact/GroupInfo.vue'
import NewFriends from '#/views/contact/NewFriends.vue'
import BlankPage from '#/views/contact/BlankPage.vue'
import { computed, nextTick, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import Tool from '#/utils/Tool'
import Api from '#/utils/Api'
import { useContactPersonInfoStore } from '#/stores/ContactPersonInfoStore'
import { useUserInfoStore } from '#/stores/UserInfoStore'

const userInfoStore = useUserInfoStore()
const contactPersonInfoStore = useContactPersonInfoStore() // 存储联系人信息  用户的所有联系人
// const audio = new Audio('src/assets/audio/wintishi.mp3')  // 提示音  audio.play()
const router = useRouter()
const route = useRoute()

const newFriends = ref({
  title: '新的朋友',
  name: '新的朋友',
  blockImg: '#fa9d3b',
  blockIcon: 'icon-add-user'
})
const groupChat = ref({
  title: '群聊',
  name: '我的群聊',
  blockImg: '#1485ee',
  blockIcon: 'icon-users-alt'
})

const loginUser = userInfoStore.getUserInfo() // 获取 登录用户的信息
const showCardInfo = ref(false) // 显示卡片信息 查询的联系人信息 错误信息（没有查到联系人）
const cardInfoType = ref(0) // 卡片信息类型 0：错误信息 1：联系人信息
const searchContactPersonMsg = ref('') // 搜索联系人返回的消息  是否查询到联系人以及联系人的状态
const leftInfoType = ref(0) // 左边信息类型 根据信息类型显示 不同信息 0：显示联系人 1/2/3：搜索结果
const rightInfoType = ref(0) // 右边信息类型 0：显示空白 1：联系人信息 2：新的朋友申请信息 3：群聊信息
const searchValue = ref('') // 搜索框输入的值  用户 输入的搜索值
const showAddContactcardInfo = ref(false)
const scrollValue = ref()  // 滚动条距离顶部的距离
const scrollbarRef = ref()  // 滚动组件的ref引用
const addFriendApplyFormData = ref({
  userId: loginUser.userId,  // 登录用户 用户id
  userSweetCircleId: '',  // 添加的联系人甜甜圈id
  noteName: '', // 备注名
  applyMsg: `我是${loginUser.nickName}`,  // 申请消息
  sweetCircleAuth: 0,  // 甜甜圈状态
  sweetCircleStatusA: -1,  // 甜甜圈状态
  sweetCircleStatus: -1  // 甜甜圈状态
})  // 滚动组件的ref引用

// 根据UserSweetCircleId 搜索 已添加的联系人
const searchResultContactPersonUserSweetCircleIdList = ref([
  {
    nickName: '联系人132',
    userSweetCircleId: '123456789',
    avatar: 'http://127.0.0.1:2024/static/avatar/ycc011.jpg'
  },
  {
    nickName: '联系人312',
    userSweetCircleId: '987654321',
    avatar: 'http://127.0.0.1:2024/static/avatar/ycc011.jpg'
  }
])
// 根据NickName 搜索 已添加的联系人
const searchResultContactPersonNickNameList = ref([
  {
    nickName: '联系人123',
    userSweetCircleId: '123456789',
    avatar: 'http://127.0.0.1:2024/static/avatar/ycc011.jpg'
  },
  {
    nickName: '联系人321',
    userSweetCircleId: '987654321',
    avatar: 'http://127.0.0.1:2024/static/avatar/ycc011.jpg'
  }
])
// 搜索 群聊信息 根据群聊的所有信息 聊天记录  联系人昵称 联系人账号
const searchResultGroupChatList = ref([
  {
    groupId: '123',
    name: '2024',
    avatar: 'http://127.0.0.1:2024/static/avatar/ycc011.jpg'
  },
  { groupId: '456', name: '2024', avatar: 'http://127.0.0.1:2024/static/avatar/ycc011.jpg' }
])

// 搜索 所有的聊天记录中所包含的信息
const searchResultChatRecordList = ref([
  {
    nickName: '联系人123',
    userSweetCircleId: '123456789',
    avatar: 'http://127.0.0.1:2024/static/avatar/ycc011.jpg'
  },
  { groupId: '456', name: '2024', avatar: 'http://127.0.0.1:2024/static/avatar/ycc011.jpg' }
])

const inputRef = ref(null) // 搜索输入框的引用 用于设置 自动获取焦点
const currentSelection = ref('') // 当前选择的联系人 或 新的朋友 群聊 用于设置选中后的背景色
const searchContactPersonResult = ref({}) // 搜索联系人返回的结果
const searchContactPersonResultIsFriend = ref(false) // 搜索联系人返回的结果 是否是自己

// 联系人列表 计算属性 从存储中获取
const contactPersonList = computed(() => {
  return contactPersonInfoStore.getContactPersonInfoList()
})
// 群聊列表
const groupChatList = ref([
  {
    groupId: '123',
    name: '2024',
    avatar: 'http://127.0.0.1:2024/static/avatar/ycc011.jpg'
  },
  { groupId: '456', name: '2024', avatar: 'http://127.0.0.1:2024/static/avatar/ycc011.jpg' }
])
/**
 * 切换右边信息类型
 * @param type
 * @param item
 */
const switchRightInfoType = (type, item) => {
  switch (type) {
    case 1: // 新的朋友
      currentSelection.value = item.name
      rightInfoType.value = 3
      break
    case 2: // 群聊消息
      currentSelection.value = item.groupId
      rightInfoType.value = 2
      break
    case 3: // 联系人
      currentSelection.value = item.userId // 当前选择的值
      contactPersonInfoStore.setContactPersonInfo(item) //设置联系人存储信息 用于更新联系人详情组件的信息
      rightInfoType.value = 1 // 右边信息的类型
      break
  }
}

/**
 * 切换左边信息类型 点击搜索面板
 */
const switchStatus = () => {
  switch (leftInfoType.value) {
    case 1:
      switchLeftInfoType(0)
      break
    case 2:
      switchLeftInfoType(0)
      break
    case 3:
      switchLeftInfoType(2)
      break
  }
}

/**
 * 切换左边信息类型
 * @param val
 */
const switchLeftInfoType = (val) => {
  searchValue.value = ''
  leftInfoType.value = val
  searchContactPersonMsg.value = ''
  nextTick(() => {
    inputRef.value.focus() // 使搜索输入框获取焦点
  })
}

/**
 * 执行搜索
 */
const executeSearch = () => {
  if (searchValue.value.trim() === '') {
    return
  }
  /** todo 执行 搜素结果  三个方向
   *  1. 联系人
   *    根据联系人 nickName userSweetCircleId
   *  2. 群聊
   *    根据群聊 name groupId
   *  3. 聊天记录
   *    根据 聊天的 群聊名 联系人名 还有聊天中的内容 群聊的公告内容
   */

  ElMessage.success('执行搜索')
}
/**
 * 对符合搜索条件的值进行高亮
 * 用于在字符串value中匹配searchValue.value的内容，
 * 并将匹配到的内容用<span>标签包裹起来，设置为绿色高亮显示。
 * 其中，使用了正则表达式reg来进行全局（gi）匹配。
 * @param value
 * @returns {*}
 */
const getValue = (value) => {
  const reg = new RegExp(searchValue.value, 'gi')
  return value.replace(reg, `<span style="color: #00c25b">${searchValue.value}</span>`)
}

/**
 * 点击搜索的好友 跳转发送消息的页面
 * @param user
 */
const sendMessage = (user) => {
  // todo 跳转发送消息的页面
}

/**
 * 搜索联系人
 */
const searchContactPerson = async (arg) => {

  // 如果搜索的是自己
  if (searchValue.value === loginUser.userSweetCircleId || searchValue.value === loginUser.email) {
    searchContactPersonResultIsFriend.value = true  //
    searchContactPersonResult.value = loginUser
    cardInfoType.value = 1 // 卡片信息类型
    showCardInfo.value = true // 显示卡片信息
    return
  }
  // 判断搜索的联系人在不在 contactPersonList
  contactPersonList.value.find((item) => {
    item.value.find((item2) => {
      if (searchValue.value === item2.userSweetCircleId || searchValue.value === item2.email) {
        searchContactPersonResult.value = item2
        searchContactPersonResultIsFriend.value = true
      }
    })
  })
  if (searchContactPersonResultIsFriend.value) {
    cardInfoType.value = 1 // 卡片信息类型
    showCardInfo.value = true // 显示卡片信息
    searchContactPersonMsg.value = '' // 消息提示信息设置为空
    return
  }

  const response = await Api.getUser(searchValue.value) // 请求后端获取联系人
  searchContactPersonResult.value = response.data // 响应数据
  searchContactPersonMsg.value = response.msg // 响应消息
  if (arg) {
    if (response.code === 200) {
      // 查到联系人
      cardInfoType.value = 1 // 卡片信息类型
      showCardInfo.value = true // 显示卡片信息
      searchContactPersonMsg.value = '' // 消息提示信息设置为空
    }
  } else {
    showCardInfo.value = true // 显示卡片信息 无论是否查询到联系人都要显示卡片
    if (response.code === 200) {
      // 查到联系人
      cardInfoType.value = 1 // 卡片信息类型
    } else {
      // 没有查询到联系人
      cardInfoType.value = 0 // 卡片信息类型 警告提示
    }
  }
}

/**
 * 添加联系人
 */
const addContactPerson = () => {
  // todo 添加联系人  searchValue.value  点击添加到通讯录时

  ElMessage.success('添加联系人')
}
/**
 * 关闭卡片
 */
const closeCard = () => {
  showCardInfo.value = false
  searchContactPersonResultIsFriend.value = false
}

/**
 * 当触发滚动事件时，返回滚动的距离
 * @param scrollTop
 */
const scroll = ({ scrollTop }) => {
  scrollValue.value = scrollTop  // 设置滚动条距离顶部的距离
}

/**
 * 监听路由变化
 *
 */
watch(
  () => route.path,
  (newVal, oldVal) => {
    setTimeout(() => {
      scrollbarRef.value.setScrollTop(scrollValue.value)  // 定位滚动条的位置
    }, 1) // 必须延时1ms
  },
  { immediate: true, deep: true }
)

</script>
<style lang="scss" scoped>
.search {
  position: fixed;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 60px;
  border-right: 1px solid #eae7e6;
  background: #ffffff;
  border-bottom: 1px solid #eae7e6;

  .search-icon {
    background: #e0e0e1;
    width: 200px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: start;
    padding-left: 10px;
    cursor: text;
    border-radius: 5px;
  }

  .search-input {
    flex: 0.9;
    margin-left: 5px;

    :deep(.el-input__wrapper) {
      height: 25px;
      box-shadow: none;
      border: 1px solid #d0d0d0;
    }
  }

  .add {
    width: 25px;
    height: 25px;
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin-right: 5px;
    background: #ececec;

    .iconfont {
      font-size: 15px;
    }

    &:hover {
      background: #e0e0e1;
    }
  }

  .cancel {
    cursor: pointer;
  }
}

.block {
  background: #e6e4e5;
  border-bottom: 1px solid #d9d9d9;

  .book-management {
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: pointer;

    .info {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 200px;
      height: 30px;
      border: 1px solid #d0d0d0;
      background: #ffffff;
      color: #000000;

      .iconfont {
        font-size: 13px;
      }
    }
  }

  .part-title {
    padding: 15px 0 0 10px;
    color: #888888;
    font-size: 13px;
  }

  .content {
    padding: 10px;

    &:hover {
      background: #dcdcdc;
    }
  }

  .active {
    background: #c6c5c5;

    &:hover {
      background-color: #c6c5c5;
    }

  }

  .part-icon {
    display: flex;

    .part-img {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        color: #ffffff;
        font-size: 30px;
      }
    }
  }

  .part-name {
    color: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 15px;
    user-select: none;
    font-size: 14px;
  }
}

.contact-list {
  padding-bottom: 3px;
}

.search-result {
  .contact-person-info {
    background: #f5f5f5;

    .user-info {
      display: flex;
      align-items: center;
      padding: 10px;

      .avatar {
        width: 40px;
      }

      .nick-name {
        user-select: none;
        margin-left: 10px;
        font-size: 15px;
      }

      .userSweetCircleId {
        user-select: none;
        margin-left: 10px;
        font-size: 12px;
      }

      &:hover {
        background-color: #e8e8e8;
      }

    }
  }

  .search-contacts-online {
    display: flex;
    align-items: center;
    padding: 10px;
    background: #ffffff;
    margin: 10px 0 10px 0;

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: #07c160;
      margin-right: 5px;

      span {
        color: #ffffff;
        font-size: 30px;
      }
    }

    &:hover {
      background-color: #f1f1f1;
    }


  }
}

.card-contact {
  width: 100%;
  height: 100%;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .card-contact-info {
    width: 250px;
    height: 150px;

    .button {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.card-contact2 {
  width: 100%;
  height: 100%;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: start;
  justify-content: center;

  .card-contact-info2 {
    width: 350px;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .info {
      display: flex;
      align-items: center;

      .userimg {
        margin-right: 10px;
      }

      .nick-name {
        color: #000000;

        .icon-man {
          color: #2cb6fe;
        }

        .icon-woman {
          color: #fb7373;
        }
      }

      .area-name {
        color: #8c8c8c;
        font-size: 13px;
      }
    }

    .button {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.el-scrollbar {
  margin-top: 60px;
  height: calc(100vh - 60px);
}

.add-contact-card {
  user-select: none;
  width: 100%;
  height: 100%;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 15px;

  .el-card {
    border: 1px solid #dedede;
    border-radius: 0;
    // 取消阴影
    box-shadow: none;

  }

  .add-contact-card-info {
    width: 300px;
    height: auto;
    //display: flex;
    //flex-direction: column;
    //align-items: start;
    //justify-content: center;
    background: #ebebec;

    :deep(.el-card__body) {
      padding: 0 15px 15px 15px;
    }

    .title {
      font-size: 15px;
      display: flex;
      justify-content: center;
    }

    .applyMsg {
      width: 260px;

      :deep(.el-input__wrapper) {
        //border-radius: 2px;
        box-shadow: none;
      }
    }

    .a {
      color: #bbbbbb;
      font-size: 13px;
      margin: 10px 0 10px 0;
    }

    .sweet-circle-authority {
      .b {
        background: #ffffff;
        padding: 15px;

        .c {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
      }
    }

    .button {
      height: 50px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;

      .el-button {
        width: 100px;
      }

      .cancel {
        background-color: #dfdfe0;
        border: none;
        color: #07c160;

        &:hover {
          background-color: #c0c0c0;
        }


      }
    }
  }
}

.el-divider {
  margin: 10px 0 10px 0;
}

.active {
  color: #07c160;
}

.el-card__body {
  padding: 0;
}

.el-switch {
  height: 100%;
}
</style>
